<template>
	<view class="van-checkbox-group" @click="handleClick">
		<checkbox-group
			:value="value"
			@change="handleChange">
			<checkbox
				:value="name"
				:disabled="disabled"
				:checked="!!value.length"
				color="var(--color)"
				style="transform:scale(0.7)">
				<view>
					<slot></slot>
				</view>
			</checkbox>
		</checkbox-group>
	</view>
</template>

<script setup>
import { ref, watch} from 'vue';

const props = defineProps({
	modelValue: {
		type: [Number, String, Boolean],
		default: true,
	},
	disabled: {
		type: Boolean,
		default: false,
	},
	name: {
		type: [Number, String],
		default: '1',
	},
});

const emit = defineEmits(['update:modelValue', 'click']);

const value = ref(props.modelValue ? [props.name] : []);

watch(() => props.modelValue, (newVal) => {
	value.value = newVal ? [props.name] : [];
	emit('click');
});

watch(value, (newValue) => {
	emit('update:modelValue', !!newValue.length);
});

// 事件处理函数
const handleChange = (e) => {
	value.value = e.detail.value;
};

const handleClick = () => {
	emit('click');
};
</script>

<style lang="scss" scoped>
</style>
